<template>
  <div class="fenlei">
    <div
      k="128"
      uuid="1580975214624"
      data-fkey="1580975214624"
      bgtype="color"
      eventtype=""
      class="lc-floor lc-xfloor--id-1580975214624  lc-floor--lg"
      style="background-size: auto;"
    >
      <div class="lc-floor__inner">
        <div
          uuid="1580975214723"
          k="129"
          class="lc-row  lc-row--lg"
          style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
        >
          <div
            uuid="1580975215304"
            canplace="true"
            k="130"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div
                class="lc-imgarea-base lc-imgarea-base--lg"
                style="width: auto; height: auto;"
              >
                <div class="lc-imgarea-base__links">
                  <div
                    class="lc-imgarea-base__links-item"
                    clstag="pageclick|keycount|imgarea_1580975215615|link_0"
                    style="top: -150px; left: 1055px; width: 135px; height: 200px;"
                  ></div>
                </div>
                <div class="lc-imgarea-base__img">
                  <img :src="img_1" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        k="132"
        uuid="1581004636366"
        data-fkey="1581004636366"
        bgtype="color"
        eventtype=""
        class="lc-floor lc-xfloor--id-1581004636366  lc-floor--lg"
        style="background-size: auto;"
      >
        <div class="lc-floor__inner">
          <div
            uuid="1581004637352"
            k="133"
            colwidthrt="1 : 3 : 1"
            class="lc-row  lc-row--lg"
            style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
          >
            <div
              uuid="1581004638229"
              canplace="true"
              k="134"
              groupid=""
              class="lc-col  lc-col--cols5-1"
            >
              <div>
                <div class="lc-ad-base">
                  <div class="lc-ad-base__list lc-ad-base__list--lg">
                    <router-link
                      style=" color: #ffffff;"
                      :to="{
                        path: '/book_list',
                        query: { sousuo: 1, id: this.categoriesId, name: 5 },
                      }"
                    >
                      <div class="lc-ad-base__item lc-ad-base__item--cols5-1">
                        <img :src="this.img" />
                      </div>
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
            <div
              uuid="1581004638298"
              canplace="true"
              k="136"
              groupid=""
              class="lc-col  lc-col--cols5-3"
            >
              <div>
                <div class="lc-goods-base">
                  <div class="lc-goods-base-main lc-goods-base-main--lg">
                    <div
                      v-for="item in booklist"
                      :key="item.isbn"
                      style=" display: inline-block;"
                      class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols5-1"
                    >
                      <router-link
                        :to="{ path: '/book', query: { id: item.isbn } }"
                        @click.native="dianji(item.bookId)"
                      >
                        <div class="goods-item" style="padding: 20px 35px;">
                          <div class="goods-item__cover" style="height: 160px;">
                            <img
                              class="goods-item__img"
                              :src=" item.img"
                              style="width: 134px; height: 160px;"
                            />
                          </div>
                          <div class="goods-item__info">
                            <div
                              class="goods-item__title goods-item__title--oneline"
                            >
                              {{ item.title }}{{ item.author }}
                            </div>
                            <div class="goods-item__content">
                              <div class="goods-item__price">
                                ￥{{ item.price }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              uuid="1581004638447"
              canplace="true"
              k="138"
              groupid=""
              class="lc-col  lc-col--cols5-1"
            >
              <div>
                <div class="lc-goods-rank">
                  <div
                    class="lc-goods-rank__container lc-goods-rank__container--lg"
                  >
                    <div
                      class="lc-goods-rank__inner lc-goods-rank__inner--layout1 lc-goods-rank__inner--cols5-1"
                    >
                      <div class="lc-goods-rank__hd">排行榜</div>
                      <nav class="lc-goods-rank__tab">
                        <ul class="lc-goods-rank__tab-nav">
                          <li
                            class="lc-goods-rank__tab-nav-item lc-goods-rank__tab-nav-item--on lc-goods-rank__tab-nav-item--three"
                            clstag="pageclick|keycount|goods_rank_1581004638299|tab_0"
                          >
                            {{ this.name_1 }}
                          </li>
                          <li
                            class="lc-goods-rank__tab-nav-item lc-goods-rank__tab-nav-item--three"
                            clstag="pageclick|keycount|goods_rank_1581004638299|tab_1"
                          >
                            <!-- 儿童文学 -->
                          </li>
                          <li
                            class="lc-goods-rank__tab-nav-item lc-goods-rank__tab-nav-item--three"
                            clstag="pageclick|keycount|goods_rank_1581004638299|tab_2"
                          >
                            <!-- 科普百科 -->
                          </li>
                        </ul>
                      </nav>
                      <div
                        class="lc-goods-rank__list-box"
                        style="padding-bottom: 20px;"
                      >
                        <ul
                          class="lc-goods-rank__list"
                          style="visibility: visible; opacity: 1;"
                        >
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth1 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_0_0"
                            v-for="(item, index) in paihan_list_1"
                            :key="item.isbn"
                          >
                            <router-link
                              :to="{ path: '/book', query: { id: item.isbn } }"
                              @click.native="dianji(item.bookId)"
                            >
                              <div
                                class="lc-goods-rank__order "
                                :class="'lc-goods-rank__order-' + (index + 1)"
                                :style="
                                  index < 3
                                    ? ' color:#FFFFFF ;'
                                    : 'color: #2C2B1D;'
                                "
                              >
                                {{ index + 1 }}
                              </div>
                              <div class="lc-goods-rank__img" v-if="index < 3">
                                <img
                                  :src="
                                     item.img
                                  "
                                />
                              </div>
                              <div class="lc-goods-rank__info">
                                <div class="lc-goods-rank__name">
                                  {{ item.title }}{{ item.author }}
                                </div>
                                <div class="lc-goods-rank__price-row">
                                  <div
                                    class="lc-goods-rank__price"
                                    style="color: rgb(240, 43, 43);"
                                  >
                                    <i>¥</i>{{ item.price }}
                                  </div>
                                </div>
                              </div>
                            </router-link>
                          </li>
                        </ul>
                        <ul
                          class="lc-goods-rank__list"
                          style="visibility: hidden; opacity: 0; position: absolute; left: 0px; top: 0px;"
                        >
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth1 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_1_0"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-1"
                            >
                              1
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img13.360buyimg.com/babel/s160x160_jfs/t18619/63/1736925968/941100/4ebec052/5ad6b08dNf354e4a2.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                米小圈上学记一年级（套装共4册）小学生课外阅读书籍注音版
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>89.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth2 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_1_1"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-2"
                            >
                              2
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img14.360buyimg.com/babel/s160x160_jfs/t19693/107/1689713410/822396/205bfbe/5ad6dddfN0d15d467.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                米小圈上学记二年级（套装共4册）小学生课外阅读书籍注音版
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>89.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth3 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_1_2"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-3"
                            >
                              3
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img11.360buyimg.com/babel/s160x160_jfs/t1/24819/36/9966/194312/5c81ed5fE3387701b/867c1414517030c3.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                耕林儿童文学：神奇话筒.在学校（5册）（阅读桥梁书，让孩子爱上阅读）绘本妈妈海桐推荐
                                [3-6岁]
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>220.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth4"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_1_3"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-4"
                            >
                              4
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img30.360buyimg.com/babel/s160x160_jfs/t1/17442/39/6512/1066383/5c529676Eabeb9387/6cf59438a1655516.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                金波四季童话：花瓣儿鱼、神奇的小银蛇等
                                （注音美绘版 套装共4册）
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>100.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth5"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_1_4"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-5"
                            >
                              5
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img30.360buyimg.com/babel/s160x160_jfs/t19504/266/1775500967/927056/a125ed0a/5ad6e489N2ee52e75.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                米小圈上学记三年级（套装共4册）小学生课外阅读书籍
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>89.00
                                </div>
                              </div>
                            </div>
                          </li>
                        </ul>
                        <ul
                          class="lc-goods-rank__list"
                          style="visibility: hidden; opacity: 0; position: absolute; left: 0px; top: 0px;"
                        >
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth1 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_2_0"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-1"
                            >
                              1
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img10.360buyimg.com/babel/s160x160_jfs/t1/98079/26/12683/193664/5e4e5e45Ee4fa9759/54178a4a06da0759.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                DK儿童情绪管理，我不生气，冷静是种超能力
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>67.30
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth2 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_2_1"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-2"
                            >
                              2
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img20.360buyimg.com/babel/s160x160_jfs/t1/165896/27/1460/482479/5ff7b430Ef2b25aee/4b8cb95f13e7bcff.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                疯狂的十万个为什么幼儿注音版（全套正版8册）3-6岁儿童绘本阅读幼儿园科普百科全书
                                小学一年级课外书籍拼音科学故事书【中国大百科全书总主编杨牧之】（小笨熊让孩子爱上阅读）
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>100.30
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth3 lc-goods-rank__item--top"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_2_2"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-3"
                            >
                              3
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img14.360buyimg.com/babel/s160x160_jfs/t1/178748/12/7534/131803/60b9d531Ec28da458/79c1a83accba9cf2.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                这就是物理化学地理（全26册）（儿童科学启蒙漫画超大豪华套装）
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>599.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth4"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_2_3"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-4"
                            >
                              4
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img13.360buyimg.com/babel/s160x160_jfs/t1/123256/37/10967/300699/5f476210E284edf34/8af89da7088472c3.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                螺丝钉 我的第一套身边科学图画故事
                                全套21册（给孩子身边的科学启蒙读物）
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>335.00
                                </div>
                              </div>
                            </div>
                          </li>
                          <li
                            class="lc-goods-rank__item lc-goods-rank__item--nth5"
                            clstag="pageclick|keycount|goods_rank_1581004638299|list_2_4"
                          >
                            <div
                              class="lc-goods-rank__order lc-goods-rank__order-5"
                            >
                              5
                            </div>
                            <div class="lc-goods-rank__img">
                              <img
                                src="//img11.360buyimg.com/babel/s160x160_jfs/t1/57722/1/16991/294016/6138293eEb0b5488b/0c84c5b55ddfcdf7.jpg!cc_160x160.webp"
                              />
                            </div>
                            <div class="lc-goods-rank__info">
                              <div class="lc-goods-rank__name">
                                藏在地图里的世界地理百科(配套AR软件,从小看世界,建立大国视野,科普百科7-14岁,全8册)北斗儿童图书
                              </div>
                              <div class="lc-goods-rank__price-row">
                                <div
                                  class="lc-goods-rank__price"
                                  style="color: rgb(240, 43, 43);"
                                >
                                  <i>¥</i>350.00
                                </div>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["categoriesId", "pageSize", "img", "img_1"],
  data() {
    return {
      booklist: [],
      paihan_list_1: [],
      name_1: "",
      page:3
    };
  },
  methods: {
       dianji(val){   //点击量
    let params = new URLSearchParams();
    params.append("bookId", val);
      axios.post('/fl-book/addBookHits',params).then((res)=>{
        
      })
    },
    getbook() {
      if (this.categoriesId == 51) {
        this.page = 1;
      }
      axios
        .get("/fl-book/getCategoriesBooks", {
          params: {
            categoriesId: this.categoriesId,
            pageSize: this.pageSize,
            page: this.page,
          },
        })
        .then((res) => {
          ;
          this.booklist = res.data.data[1].records;
          ;
        });
    },
    getfenlei() {
      axios
        .get("/fl-categories/byCategory", {
          params: {
            categoriesId: this.categoriesId,
            size: 5,
          },
        })
        .then((res) => {
          ;
          this.paihan_list_1 = res.data.data[1];
          this.name_1 = res.data.data[0];
        });
    },
  },
  created() {
    this.getbook();
    this.getfenlei();
  },
};
</script>

<style >
.fenlei {
  top: 20px;
  width: 60%;
  width: 68%;
  margin: 0;
  padding: 0;
  margin-left: 15%;
}
.lc-imgarea-base {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.lc-imgarea-base__links-item {
  position: absolute;
  z-index: 99;
  width: 200px;
  height: 100px;
  border: none;
  cursor: pointer;
}
.lc-imgarea-base__links-item--dev {
  background: rgba(4, 3, 3, 0.51);
  border: dashed 1px #fff;
}
.lc-imgarea-base__links-tip {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 6px;
  font-size: 14px;
  background: #fff;
  z-index: 100;
}
.lc-imgarea-base__img {
  display: block;
}
.lc-imgarea-base__img img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0px;
}
.goods-item__title--oneline {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.goods-item__title--twoline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goods-item {
  box-sizing: content-box;
  cursor: pointer;
  margin: 0 auto;
  margin-bottom: 10px;
  background: #fff;
  margin-top: 2px;
  height: 200px;
}
.goods-item-wrapper--right-line::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px;
  top: 50%;
  right: 0;
  margin-top: -50px;
  background: #ccc;
}
.goods-item-wrapper--top-line::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  background: #ccc;
}
.goods-item-wrapper:hover .goods-item__title {
  color: #c81623;
}
.goods-item-wrapper:hover .goods-item__cover {
  opacity: 0.8;
}
.goods-item--nomargin {
  margin-bottom: 0;
}
.goods-item--radius {
  border-radius: 10px;
}
.goods-item__cover {
  position: relative;
  box-sizing: content-box;
}
.goods-item__cover--entry {
  display: inline-block;
  vertical-align: top;
}
.goods-item__cover--seckill {
  padding: 20px;
  padding-bottom: 0;
}
.goods-item__img {
  margin: 0 auto;
  display: block;
}
.goods-item__gap {
  position: absolute;
  width: 1px;
  height: 100px;
  top: 50%;
  right: 0;
  margin-top: -50px;
  background: #ccc;
}
.goods-item__info {
  position: relative;
  margin-top: 10px;
}
.goods-item__info--entry {
  margin-top: 0;
  margin-left: 10px;
  display: inline-block;
  position: relative;
}
.goods-item__info--pingou {
  padding: 0 10px;
  padding-bottom: 5px;
}
.goods-item__info--seckill {
  padding: 0 20px;
  padding-bottom: 5px;
}
.goods-item__info--cols2-1 {
  color: #232321;
  width: 280px;
}
.goods-item__info--cols2-1-x {
  color: #232321;
  width: 190px;
}
.goods-item__info--cols3-1 {
  color: #232321;
  width: 190px;
}
.goods-item__info--cols5-1 {
  color: #666;
  width: 90px;
}
.goods-item__info--cols6-1 {
  color: #666;
  width: 90px;
}
.goods-item__hover {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  z-index: 11;
  color: #fff;
  background: #f02b2b;
}
.goods-item__hover--nomargin {
  bottom: 10px;
}
.goods-item__title {
  font-size: 14px;
  line-height: 1.3;
}
.goods-item__title--twoline {
  height: 36px;
}
.goods-item__title--guess {
  font-size: 12px;
  height: 30px;
}
.goods-item__title--guess-oneline {
  margin-top: 15px;
  height: 15px;
}
.goods-item__title--cols2-1-x {
  font-size: 18px;
  height: 48px;
}
.goods-item__title--cols2-1-x--oneline {
  height: 24px;
}
.goods-item__content {
  margin-top: 5px;
  position: relative;
}
.goods-item__content--entry {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.goods-item__content--guess-entry {
  line-height: 30px;
}
.goods-item__current-price {
  font-size: 14px;
  color: #666;
}
.goods-item__price {
  font-family: "JDZH-Regular", sans-serif;
  display: inline-block;
  color: #f02b2b;
  margin-top: 5px;
  margin-right: 5px;
  font-size: 16px;
}
.goods-item__vice-price {
  color: #000;
  font-size: 12px;
}
.goods-item__plus-price {
  position: relative;
  color: #000;
  font-size: 12px;
}
.goods-item__plus-price::after {
  content: "";
  position: absolute;
  right: -21px;
  bottom: 6px;
  width: 20px;
  height: 8px;
  background: url("")
    no-repeat center;
  background-size: 20px 8px;
}
.goods-item__backstage-price {
  color: #bec2c6;
  font-size: 12px;
  margin: -1px;
}
.goods-item__backstage-price > span {
  text-decoration: line-through;
}
.goods-item__inter-price {
  display: block !important;
  color: #262626;
  font-size: 12px;
  margin-top: 0;
}
.goods-item__enterprise-price {
  display: block !important;
  color: #262626;
  font-size: 12px;
  margin-top: 0;
}
.goods-item__comments {
  margin: 5px 0;
  height: 18px;
}
.goods-item__comment {
  display: inline-block;
  position: relative;
  font-size: 12px;
}
.goods-item__comment .l-icon-comment {
  margin-right: 5px;
}
.goods-item__goodrate {
  display: inline-block;
  font-size: 12px;
  margin-left: 5px;
}
.goods-item__btn {
  width: 100%;
  text-align: center;
  background: #f02b2b;
  color: #fff;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}
.goods-item__btn span {
  position: relative;
  left: 0;
  font-size: 14px;
}
.goods-item__btn span::before {
  position: absolute;
  content: "";
  left: -18px;
  top: 2px;
  width: 14px;
  height: 14px;
}
.goods-item__btn--radius {
  border-radius: 50px;
}
.goods-item__btn--entry {
  width: 120px;
  margin-top: 0;
}
.goods-item__btn--cart span {
  left: 5px;
}
.goods-item__btn--cart i {
  font-size: 14px;
}
.goods-item__slogan {
  margin: 5px 0;
  height: 18px;
  color: #f02b2b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-item__slogan--larger {
  font-size: 14px;
}
.goods-item__tags {
  height: 20px;
  margin: 5px 0;
}
.goods-item__tag {
  height: 18px;
  line-height: 16px;
  vertical-align: top;
  color: #fe9d46;
  font-size: 12px;
  border: 1px solid #fe9d46;
  display: inline-block;
  margin-right: 2px;
  padding: 0 2px;
}
.goods-item__soldout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  text-align: center;
  font-size: 24px;
  color: #fff;
  transform: rotate(-25deg);
}
.lc-col--cols5-3 {
  width: 60%;
  height: 420px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols6-1 {
  width: 190px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols6-2 {
  width: 390px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols6-3 {
  width: 590px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols6-4 {
  width: 790px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols6-5 {
  width: 990px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols5-1 {
  width: 230px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols5-2 {
  width: 470px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols5-3 {
  width: 710px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols5-4 {
  width: 950px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols4-1 {
  width: 290px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols4-2 {
  width: 590px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols4-3 {
  width: 890px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols3-1 {
  width: 390px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols3-2 {
  width: 790px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols2-1 {
  width: 590px;
}
.lc-goods-base-main--lg .goods-item-wrapper--cols-full {
  width: 1190px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols6-1 {
  width: 156.66667px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols6-2 {
  width: 323.33333px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols6-3 {
  width: 490px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols6-4 {
  width: 656.66667px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols6-5 {
  width: 823.33333px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols5-1 {
  width: 190px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols5-2 {
  width: 390px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols5-3 {
  width: 590px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols5-4 {
  width: 790px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols4-1 {
  width: 240px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols4-2 {
  width: 490px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols4-3 {
  width: 740px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols3-1 {
  width: 323.33333px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols3-2 {
  width: 656.66667px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols2-1 {
  width: 490px;
}
.lc-goods-base-main--md .goods-item-wrapper--cols-full {
  width: 990px;
}
.lc-goods-base-main::before,
.lc-goods-base-main::after {
  content: " ";
  display: table;
}
.lc-goods-base-main::after {
  clear: both;
}
.lc-goods-base-main::before,
.lc-goods-base-main::after {
  content: " ";
  display: table;
}
.lc-goods-base-main::after {
  clear: both;
}
.lc-goods-base-main--lg {
  margin-left: -11px;
}
.lc-goods-base-main--md {
  margin-left: -11px;
}
.lc-goods-base-main--no-gutter {
  margin-left: 0 !important;
}
.lc-goods-base-main--no-gutter > [class*="--cols"] {
  margin-left: 0 !important;
}
.lc-goods-base-main--lg .goods-item-wrapper {
  margin-left: 10px;
}
.lc-goods-base-main--md .goods-item-wrapper {
  margin-left: 10px;
}
.lc-goods-base-main .goods-item-wrapper {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 31%;
  min-height: 1px;
}
</style>
